<template>
  <body class="bg">
  <div class="top clear">
    <div class="topLogin clear">
      <div class="topLoginMain">
        <div class="logo left ">
          <img src="/static/images/i22.png" width="338">
        </div>
        <div class="right loginMenu">
          <a href="javascript:;" class="tidings"><img src="/static/images/i11.png" width="27"><i></i></a>
          <span class="LoggedIn">您好，<div class="someone">
                    <span>张三</span>
                       <div class="dropDown">
                    <i></i>
                    <ul>
                        <li>
                            <a href="javascript:;">修改个人信息</a>
                        </li>
                        <li>
                            <a href="javascript:;">修改密码</a>
                        </li>
                    </ul>
                </div>
                </div>
                </span>|
          <a href="javascript:;" style="padding:0 13px;">退出</a>|<a href="javascript:;">帮助中心</a>

        </div>
      </div>
    </div>
    <div class="centerNav">
      <ul class="clear">
        <li>
          <a href="javascript:;">
            <img src="/static/images/i1.png" width="49">
            <p>新建稿件</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="/static/images/i2.png" width="55">
            <p>我的文档</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="/static/images/i3.png" width="45">
            <p>我要投稿</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="/static/images/i4.png" width="46">
            <p>我的约稿<span>(5)</span></p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="/static/images/i5.png" width="49">
            <p>稿件管理</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="/static/images/i6.png" width="38">
            <p>合同管理</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="route">
    <div class="routeMain clear">
      <div class="left routeShow">
        <a href="javascript:;">首页</a><i> > </i><a href="javascript:;">合同管理</a>
      </div>
      <div class="right">
        <p><span>上次登录时间：</span><label>2017-11-27 16:05</label></p>
      </div>
    </div>
  </div>
  <div class="Main">
    <div class="writeArticle">
      <div class="articleBtn clear">

        <div class="right">
          <span class="left">搜索：</span>
          <div class="left">
            <span>合同名称：</span>
            <div class="articleSearch">
              <input type="text">
              <span><img src="/static/images/x4_03.png">搜索</span>
            </div>
          </div>
        </div>
      </div>
      <table border="0" cellspacing="0">
        <tr>
          <th width="210">合同名称</th>
          <th width="172">合同类型</th>
          <th width="118">经手人</th>
          <th width="132">签订人</th>
          <th width="270">起止时间</th>
          <th width="94">状态</th>
          <th width="75">查看</th>
        </tr>
        <tr v-for="agreement in agreements">
          <td width="210">{{agreement.true_name}}</td>
          <td width="172" v-if="agreement.sex == 0">男</td>
          <td width="172" v-if="agreement.sex == 1">女</td>
          <td width="172" v-if="agreement.sex == undefined">无</td>
          <td width="118">{{agreement.nick_name}}</td>
          <td width="132">{{agreement.login_name}}</td>
          <td width="270">{{agreement.create_date}}</td>
          <td width="94"><span class="going1">生效中</span></td>
          <td width="75" v-on:click="show(agreement.user_id)"><img src="/static/images/h1.png" width="18" class="imgCheck"></td>
        </tr>
      </table>
      <div class="page" style="padding: 45px 0 5px;">
        <!-- <a href="javscript:;">&lt;&nbsp;<</a>-->
        <a href="javscript:;" class="nowpage">1</a>
        <a href="javscript:;">2</a>
        <a href="javscript:;">3</a>
        <a href="javscript:;">4</a>
        <a href="javscript:;">5</a>
        <a href="javscript:;">6</a>
        <a href="javscript:;">7</a>
        <a href="javscript:;">...</a>
        <a href="javscript:;">99</a>
        <a href="javscript:;"><img src="/static/images/right_03.jpg" width="7"></a>
      </div>
      <!--查看 合同 弹出框 start-->
      <div class="previewBig" ref="previewBig">
        <div class="contract">
          <div class="previewClose" ref="previewClose"><img src="/static/images/close_03.png"></div>
          <div class="contractDiv">
            <div class="contractTitle">
              <i></i><span>合同明细</span><i></i>
            </div>
            <div class="contractTable">
              <div>
                <p><span>合同名称:</span><span>{{true_name}}</span></p>
                <p><span>合同类型：</span><span>{{sex}}</span></p>
              </div>
              <div>
                <p><span>起始时间：</span><span>2017-11-28</span></p>
                <p><span>终止时间：</span><span>2017-11-28</span></p>
              </div>
              <div>
                <p><span>出版时间：</span><span>2017-11-28</span></p>
                <p><span>定价：</span><span>200元</span></p>
              </div>
              <div>
                <p><span>著作权人：</span><span>待定</span></p>
                <p><span>署名：</span><span>待定</span></p>
              </div>
              <div>
                <p><span>包销册数：</span><span>200</span></p>
                <p><span>折扣：</span><span>9</span></p>
              </div>
              <div>
                <p><span>经手人：</span><span>待定</span></p>
                <p><span>签订人：</span><span>待定</span></p>
              </div>
              <div>
                <p><span>备注：</span><span>无</span></p>
              </div>
            </div>
          </div>
          <div class="contractDiv">
            <div class="contractTitle">
              <i></i><span>合同附件</span><i></i>
            </div>
            <div class="contractAdd">
              <div>
                <span>合同文件：</span><label>C++程序设计投稿合同.jpg</label><label>C++程序设计投稿合同.docx</label>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!--查看 合同 弹出框 end-->
    </div>
  </div>
  <div class="footer">
    <p><span>Copyright©2014-2017</span><span>内蒙古出版集团</span></p>
    <p>地址：内蒙古呼和浩特市新华东街89号出版集团大厦</p>
  </div>
  </body>
</template>

<script>
    export default {
        name: "page",
        data:function(){
          return {
            agreements: [],
            true_name: '',
            sex: ''
          }
        },
      // 点击菜单使用的函数
      methods: {
        makeActive: function(item){
          // 模型改变，视图会自动更新
          this.active = item;
        },
        // 发送ajax请求，获取用户列表
        loadData: function() {
          var that = this;
          /*this.$axios.get('http://localhost:7654/test?id=123&name=你好')*/
          this.$axios.post('/user/test.shtml', {
            pageNum: 1,
            pageSize: 10
          }).then(function (response) {

            var data = response.data.rows;
            that.agreements = data;

          })
          .catch(function (error) {
            console.log(error);
          });
        },
        show:function(user_id){
          var that = this;
          this.$axios.post('/user/getUserById.shtml?user_id='+user_id).then(function (response) {
            var data = response.data.user;
            that.true_name = data.true_name;
            that.sex = data.sex;

          })
          .catch(function (error) {
            console.log(error);
          });

          this.$refs.previewBig.style.display = 'block';
        }
      },
      mounted: function() {
        var that = this;
        that.loadData();
        that.$refs.previewClose.addEventListener('click',function () {
          that.$refs.previewBig.style.display = 'none';
        })
      }
    }
</script>

<style>
  @import '../assets/css/style.css';
  @import '../assets/css/login.css';
  @import '../assets/css/common.css';

</style>
